<clr-modal [clrModalSize]="'md'" [(clrModalOpen)]="createAppOpened">
  <h3 class="modal-title">负载均衡详情</h3>
  <div class="modal-body">
    <hr>
    <form>
      <section class="form-block form-box">
        <div class="clr-row group">
          <div class="clr-col-sm-3">
            负载均衡名称
          </div>
          <div class="clr-col-sm-9">
            {{service?.metadata.name}}
          </div>
        </div>

        <div class="clr-row group">
          <div class="clr-col-sm-3">
            类型
          </div>
          <div class="clr-col-sm-9">
            {{service?.spec.type}}
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-3">
            集群IP
          </div>
          <div class="clr-col-sm-9">
            {{service?.spec.clusterIP}}
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-3">
            端口
          </div>
          <div class="clr-col-sm-9">
            {{getPorts()}}
          </div>
        </div>
        <div *ngFor="let selector of getSelectors(); let i = index" class="clr-row group">
          <div class="clr-col-sm-3">
            <div *ngIf="i === 0">选择器</div>
          </div>
          <div class="clr-col-sm-9">
            {{selector}}
          </div>
        </div>

      </section>
    </form>
  </div>
</clr-modal>
